<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItems">报废申请</el-button>
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入设备/编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key =='key_part_name'">
          <a href="javascript:;" @click.stop="goDetail(v.row)" class="text-blue text-bold">{{ v.row[v.key] }}</a>
        </span>
        <span v-else-if="v.key == 'brief_code'">
          {{getStatus(v)}}
        </span>

        <span v-else>{{ v.row[v.key] }}</span>
      </template>

    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <!-- 附件预留 -->
    <previewFiles :previewFilesShow="previewFilesShow" />
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import previewFiles from '@/views/tpm/components/previewFiles'
export default {
  name: 'scrapApplicationForm',
  mixins: [commonMixin],
  components: { previewFiles },
  props: {},
  data() {
    return {
      query: {
        queryString: '',
        page: 1,
        size: 10,
      },
      name: '报废申请单',
      tableProps: {
        border: true,
        opsColWith: 80,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: false,
      },
      columns: [
        { title: '设备类型', key: 'key_part_no', width: 100, fixed: 'left' },
        { title: '设备编号', key: 'key_part', width: 100, fixed: 'left' },
        { title: '设备型号规格', key: 'category', width: 140 },
        { title: '报废原因', key: 'key_part_type', width: 80 },
        { title: '报废数量', key: 'key_part_type', width: 80 },
        { title: '附件查看', key: 'key_part_name', width: 100 },
        { title: '申请人', key: 'model_name', width: 80 },
        { title: '申请日期', key: 'model_name', width: 80 },
        { title: '备注', key: 'model_name', width: 80 },
        { title: '状态', key: 'key_part_desc', minWidth: 100, fixed: 'right' },
      ],
      list: [
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
        {
          brief_code: null,
          category: 2,
          create_time: '2022-03-30 09:56:56',
          create_user: 'administrator',
          e_code: null,
          erp_create_date: '1900-01-01 00:00:00',
          erp_modify_date: '1900-01-01 00:00:00',
          id: 'b9ddd873-5905-4df6-85f8-5a52cbdf0e40',
          is_valid: 'Y',
          key_part_desc: '燃料电池母电堆',
          key_part_name: '燃料电池母电堆',
          key_part_no: 'P010',
          key_part_type: '',
          model_code: '05',
          model_id: '52cc7343-567b-4025-ac9d-84e54504a073',
          model_name: '零星采购',
          modify_time: '2022-04-15 11:35:56',
          modify_user: 'administrator',
        },
      ],
      fields: [
        { title: '设备类型', key: 'key_part_no', span: 12 },
        { title: '设备编号', key: 'key_part_no', span: 12 },
        { title: '设备型号规格', key: 'key_part_type', span: 12 },
        { title: '报废数量', key: 'key_part_type', span: 12 },
        { title: '申请人', key: 'key_part_no', span: 12 },
        { title: '报废原因', key: 'key_part_type', span: 12, name: 'textarea' },

        {
          title: '上传附件',
          key: 'filelist',
          span: 24,
          name: 'fileUploader',
          tips: '不能大于20M',
          props: {
            action: '',
            // accept: '.jpg,.png,.pdf,',
            limit: 5,
            autoUpload: false,
            multiple: true,
            'on-change': this.uploadOnchange,
            'before-remove': this.beforeRemove,
            'on-preview': this.onPreview,
            'on-exceed': this.handleExceed,
          },
        },
      ],
      // 上传数据
      formData: new FormData(),
      removeFiles: [],
      // 预览组件
      previewFilesShow: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 创建数据
    createItems() {
      this.formData = new FormData()
      this.createItem()
    },
    // 获取备件状态,可以直接写在table里
    getStatus(val) {
      return '正常'
    },

    // 附件查看
    goDetail(v) {
      this.previewFilesShow = true
    },

    // 上传
    uploadOnchange(file, fileList) {
      let f = file.raw
      const isLt20M = f.size / 1024 / 1024 < 20
      if (!isLt20M) {
        fileList.splice(fileList.indexOf(f), 1)
        return this.$message.error('上传档案大小不能超过 20MB!')
      }
      alert(9)
      this.formData.append('file', f)
    },
    // 清除附件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除${file.name}?`, 提示, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (file.FileId) {
          // 已经有附件了,进行删除
          this.removeFiles.push(file.FileId)
        } else {
          this.formData = new FormData()
          // 刚上传没有点确定
          fileList.forEach((i) => {
            if (!i.FileId && i.name != file.name) {
              this.formData.append('file', i.raw)
            }
          })
        }
      })
    },
    // 预览
    onPreview(file) {
      alert('没有接口看个毛')
    },
    // 超过最大上传数
    handleExceed() {
      return this.$message.warning('最多只能上传5张图片')
    },
  },
}
</script>

<style lang="less" scoped></style>